<template>
    <div>
        <div>
            <div class="J-weixin-tip weixin-tip" ref="myWeixinTip">
                <div class="weixin-tip-content" ref="myWeixinTipContent" style="font-size: 14px">
                            请在菜单中选择在浏览器中打开,<br/>
                            以完成支付    
                </div>
                  
            </div>
            <div class="J-weixin-tip-img weixin-tip-img"></div>
        </div>
    </div>
</template>

<script>
    import _AP from "@/utils/ap"

    export default {
        name: "alipay",
        data() {
            return {}
        },
        mounted()
        {
            if (location.hash.indexOf('error') != -1) {
                alert('参数错误，请检查');
            } else {
                var ua = navigator.userAgent.toLowerCase();
                var tip = document.querySelector(".weixin-tip");
                var tipImg = document.querySelector(".J-weixin-tip-img");
                if (ua.indexOf('micromessenger') != -1) {
                    tip.style.display = 'block';
                    tipImg.style.display = 'block';
                    if (ua.indexOf('iphone') != -1 || ua.indexOf('ipad') != -1 || ua.indexOf('ipod') != -1) {
                        tipImg.className = 'J-weixin-tip-img weixin-tip-img iphone'
                    } else {
                        tipImg.className = 'J-weixin-tip-img weixin-tip-img android'
                    }
                } else {
                    var getQueryString = function (url, name) {
                        var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
                        if (reg.test(url)) return RegExp.$2.replace(/\+/g, " ");
                    };
                    var param = getQueryString(location.href, 'goto') || '';
                    location.href = param != '' ? _AP.decode(param) : '/alipay#error';
                }
            }
        }
    }

</script>
<style>
    *, :before, :after {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
    }

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, p, blockquote, th, td {
        margin: 0;
        padding: 0
    }

    table {
        border-collapse: collapse;
        border-spacing: 0
    }

    fieldset, img {
        border: 0
    }

    li {
        list-style: none
    }

    caption, th {
        text-align: left
    }

    q:before, q:after {
        content: ""
    }

    input:password {
        ime-mode: disabled
    }

    :focus {
        outline: 0
    }

    html, body {
        -webkit-touch-callout: none;
        touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        tap-highlight-color: transparent;
        height: 100%;
        margin: 0;
        padding: 0;
        /*text-align: center;*/
        font-size: 15px;
        font-weight: 300;
        font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
    }

    a {
        text-decoration: none
    }

    body {
        background: #F4F4F8
    }

    .weixin-tip {
        display: none;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        top: 15px;
        right: 20px;
        width: 265px;
        padding: 55px 0 0;
        text-align: left;
        background: url() no-repeat right top;
        background-size: 45px 68px
    }

    .weixin-tip-img {
        display: none;
        padding: 110px 0 0
    }

    .weixin-tip-img::after {
        display: block;
        margin: 15px auto;
        content: ' ';
        background-size: cover
    }

    .weixin-tip-img.iphone::after {
        width: 150px;
        height: 150px;
        background-image: url()
    }

    .weixin-tip-img.android::after {
        width: 173px;
        height: 240px;
        background-image: url()
    }
</style>
<style scoped>

</style>